<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    // 方式一: Object构造函数模式
    // - 套路: 先创建空Object对象, 再动态添加属性/方法
    // - 适用场景: 起始时不确定对象内部数据
    // - 问题: 语句太多
    // var obj = new Object();
    // obj.userName = "zhangsan";
    // obj.age = 12;

    // 方式二: 对象字面量模式
    // * 套路: 使用{}创建对象, 同时指定属性/方法
    // * 适用场景: 起始时对象内部数据是确定的
    // * 问题: 如果创建多个同结构的对象, 有重复代码

    // const obj = {
    //     userName:"zhangsan",
    //     age:12
    // }
    // obj.sex = "男"

    // function fn(options){
    //
    // }
    // fn({
    //     userName:"zhangsan",
    //     age:12
    // });
    //
    // fn({
    //     userName:"lisi",
    //     age:18
    // })


    // 方式三: 工厂模式
    //
    // - 套路: 通过工厂函数动态创建对象并返回
    // - 适用场景: 需要创建多个对象
    // - 问题: 对象没有一个具体的类型, 都是Object类型

    // function fn(options){
    //
    // }
    // function createObj (userName,age){
    //     return {
    //         id:Math.random().toString().slice(2),
    //         userName,
    //         age,
    //         sex:"男"
    //     }
    // }
    // fn(createObj("zhangsan",12));
    // fn(createObj("lisi",18));

    // console.log(createObj("zhangsan,lisi").constructor)


    // 方式四: 自定义构造函数模式
    // * 套路: 自定义构造函数, 通过new创建对象
    // * 适用场景: 需要创建多个类型确定的对象
    // * 问题: 每个对象都有相同的数据, 浪费内存

    // // 类，对象关系：对象是通过类实例化出来的。（构造函数视为类）
    // function Box(userName,age){
    //     this.userName =userName;
    //     this.age = age;
    //     this.run = function(){
    //         console.log(this.userName,this.age);
    //     }
    // }
    // function Desk(){
    //
    // }
    // // const obj = new Box();
    // // const desk = new Desk();
    // // console.log(obj.constructor === Box);
    // // console.log(obj.constructor === Object);
    // const obj = new Box("zhangsan",12);
    // const obj2 = new Box("lisi",18);
    // console.log(obj,obj2);
    // console.log(obj===obj2);// false



    // * 方式五: 构造函数+原型的组合模式
    // * 套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上
    // * 适用场景: 需要创建多个类型确定的对象
    function Box(userName,age){
        this.userName = userName;
        this.age = age;
    }
    Box.prototype.run = function(){
        console.log(this.userName,this.age);
    }
    const obj = new Box("zhangsan",12);
    const obj2 = new Box("lisi",18);
    // console.log(obj===obj2);//false

    console.log(obj.__proto__ === Box.prototype);// true
    console.log(obj2.__proto__ === Box.prototype);// true
    console.log(obj.__proto__ === obj2.__proto__);// true
    obj.run();
    obj2.run()
    console.log(obj)



</script>
</html>